<template>
<div class="main">
    <!--banner-->
  <div class="tutor-detail" style="margin-bottom:.5rem;">
   <follow-btn class="follow" :professorid="professorInfo.id" :followid="professorInfo.follow_id" v-on:followStatusChange="updateProfessorList" ></follow-btn>
   <div class="tutor">
    <div class="avatar">
     <div class="avatar" style="position:relative;width:2.65rem;height:2.65rem;border-radius:50%;display:inline-block;">
      <img style="position:relative;width:2.65rem;height:2.65rem;border-radius:50%;display:inline-block;" class="avatarImg" :src="professorInfo.avatar" />
      <img class="verified" style="position:absolute;width:0.8833333333333333rem;height:0.8833333333333333rem;right:0;bottom:0;" src="/fengshui/static/pic/icon/verified.png" />
     </div>
    </div>
    <div class="nickname">
     {{professorInfo.name}}
    </div>
    <div class="follow-count">
     <span class="count">{{professorInfo.follow_count}}</span>
     <span>人收听</span>
    </div>
   </div>
   <div class="title">
    {{professorInfo.title}}
   </div>
   <div class="introduction">
    {{professorInfo.description}}
   </div>
   <div class="tags">
    <!--<a  class="tag">娱乐</a>-->
   </div>
  </div>

  <!--提问板块-->
<div class="question-form">
   <div class="tips">
    <span class="ques-note"><span>提问须知</span><span class="read-me"></span></span>
   </div>
   <div class="text-wrap">
    <textarea maxlength="80" v-model="questionContent" placeholder="提问免费，收听1元"></textarea>
    <span class="counter"><span>{{contentLength}}</span><span>/</span><span>80</span></span>
   </div>
   <div class="btn-panel">
    <button type="button" @click="askQuestion"><span>免费 提问</span></button>
   </div>
  </div>
  <!--问题列表-->

   <div class="header-bar" v-if="questionList.length>0">
   <span class="total"><span>回答 </span><span>{{professorInfo.answer_count}}</span></span>
   <span class="total"><span>被听过 </span><span>{{professorInfo.listen_count}}</span></span>
   <!--<div class="drop-wrap">
    <span class="drop-btn" href="javascript:;">
        <span>热门</span>
        <i class="arrow-down-icon"></i>
        </span>
    <ul class="drop-menu">
     <li class="arrow-up"></li>
     <li class="drop-item">热门</li>
     <li class="drop-item current">最新</li>
    </ul>
   </div>-->
  </div>
  <ul class="questions">
   <li class="a-question" v-for="(question,index) in questionList">
   <div style="display:table;">
     <div class="avatar" style="position:relative;width:1.85rem;height:1.85rem;border-radius:50%;display:inline-block;float:left;">
      <img style="position:relative;width:1.85rem;height:1.85rem;border-radius:50%;display:inline-block;" class="avatarImg" :src="question.user_avatar" />
      <img class="verified" style="position:absolute;width:0.6166666666666667rem;height:0.6166666666666667rem;right:0;bottom:0;" src="/fengshui/static/pic/icon/verified.png" />
     </div>

     <div style="margin-left:2.6rem;">
      <p class="question-content">{{question.title}}</p>
     </div>
   </div>
   <div class="question-answer">
    <div class="avatar" style="position:relative;width:1.85rem;height:1.85rem;border-radius:50%;display:inline-block;">
     <img style="position:relative;width:1.85rem;height:1.85rem;border-radius:50%;display:inline-block;" class="avatarImg" :src="question.professor_avatar" />
    </div>
    <input type="hidden" value="nothing" />
    <player v-on:listenCountIncrease="addListenCount(index)"  :id="question.answer_id" class="player"></player>
    <span class="duration">{{ question.duration }}″</span>
   </div>
   <div class="question-footer">
       <like-btn class="count" :likecount="question.like_count" :questionid="question.question_id" :likeid="question.like_id" ></like-btn>
    <!--<span class="count"><i class="like-icon like-icon-gray"></i><span> {{question.like_count}}</span></span>-->
    <span class="count"><span>听过&nbsp;</span><span>{{question.listen_count}}</span></span>
    <span class="time">{{timeAgo(question.time)}}</span>
   </div>
   </li>
      <infinite-loading :on-infinite="fetchAnswerData"  distance="10" ref="infiniteLoading">
                   <i slot="spinner" class="loading-customer-spiral"></i>
                   <p slot="no-more">到底了 :)</p>
      </infinite-loading>
  </ul>


<customer-footer></customer-footer>
      <x-dialog  v-model="showFollowTip" class="dialog-demo" :scroll="false">
        <div class="img-box">
            <!--<p>【重要】关注我们，第一时间收到回复通知~~</p>-->
          <img src="/fengshui/static/pic/nav.jpg" style="max-width:100%">
        </div>
        <div @click="showFollowTip=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>


</div>
</template>
<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import {
        timeAgo
    } from '../js/util.js'


    import LikeBtn from "../components/QuestionLikeBtn"
    import xDialog from "vux/src/components/x-dialog"

    export default {
        components: {
            LikeBtn,
            xDialog,
            InfiniteLoading
        },
        data() {
            return {
                showFollowTip: false,
                page_count: 100,
                page_index: 0,
                questionContent: "",
                textarea: undefined,
                contentLength: 0,
                professorInfo: {},
                questionList: []
            }
        },
        computed: {},

        methods: {
            addListenCount: function(index) {
                this.questionList[index].listen_count = Number(this.questionList[index].listen_count) + 1;

            },
            timeAgo: function(time) {
                return timeAgo(time);
            },
            updateTextCount: function(e) {
                this.contentLength = this.textarea.value.length;
            },
            updateProfessorList: function(index, followId) {

                console.log("updateProfessorList in professor")
                if (followId == null || isNaN(followId)) {
                    this.professorInfo.follow_count--;
                } else {
                    this.professorInfo.follow_count++;
                }
            },

            askQuestion() {
                let vm = this;
                if (typeof(vm.questionContent) == 'undefined' || vm.questionContent.length < 6) {
                    vm.$vux.alert.show({
                        title: '错误提示！',
                        content: "提问内容至少6字符！！！"
                    })
                    return;
                }
                let params = {
                    professor_id: vm.professorInfo.id,
                    questionContent: vm.questionContent
                }
                vm.$vux.loading.show({
                    text: '上传提问中请稍等...'
                })
                vm.$http.jsonp(vm.url.acid + "&do=submitQuestion", {
                    params: params
                }).then(response => {
                    vm.$vux.loading.hide()
                    let body = response.body;
                    if (body.status == 'success') {
                        vm.$vux.alert.show({
                            title: '提问上传结果！',
                            content: "上传提问成功，请耐心等待大师为您解答。",
                            onHide() {
                                //如果没关注提示关注公众号
                                if (typeof(body.follow) !== 'undefined' && body.follow == 0) {
                                    vm.showFollowTip = true;
                                }
                            }
                        })


                    } else {
                        vm.$vux.alert.show({
                            title: '错误提示！',
                            content: body.msg
                        })
                    }
                }, response => {
                    vm.$vux.loading.hide()
                    vm.$vux.alert.show({
                        title: '错误提示!',
                        content: '网络连接失败，请连网后重试'
                    })

                });

            },
            fetchAnswerData() {
                let vm = this;
                if (vm.page_index >= vm.page_count) {
                    return;
                }
                vm.busy = true;

                let params = {
                    do: 'professoranswerlist',
                    professor_id: vm.$route.params.id,
                    p: vm.page_index + 1
                }
                vm.$http.jsonp(vm.url.acid, {
                    params: params
                }).then(response => {
                    let body = response.body;
                    if (body.status == 'success') {

                        vm.page_count = body.page_count;
                        vm.page_index = body.page_index;
                        vm.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                        vm.questionList = vm.questionList.concat(body.data);
                        if (vm.page_index >= vm.page_count) {
                            vm.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        }
                    } else {
                        vm.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        vm.$vux.alert.show({
                            title: '错误提示！',
                            content: body.msg
                        })
                    }
                }, response => {
                    vm.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                    vm.$vux.alert.show({
                        title: '错误提示!',
                        content: '网络连接失败，请连网后重试'
                    })
                });

            },
            getProfessorInfo() {
                let vm = this;
                let params = {
                    do: 'professor',
                    professor_id: vm.$route.params.id
                }
                vm.$http.jsonp(vm.url.acid, {
                    params: params
                }).then(response => {
                    this.$vux.loading.hide()
                    let body = response.body;
                    if (body.status == 'success') {
                        vm.professorInfo = body.info;
                        console.log(body.info)
                    } else {
                        vm.$vux.alert.show({
                            title: '错误提示！',
                            content: body.msg
                        })
                    }
                }, response => {
                    vm.$vux.loading.hide()
                    vm.$vux.alert.show({
                        title: '错误提示!',
                        content: '网络连接失败，请连网后重试'
                    })
                });
            }
        },
        mounted() {
            //申请显示文字字数的数据
            this.textarea = this.$el.querySelectorAll('textarea')[0];
            this.textarea.addEventListener('keyup', this.updateTextCount);
            //下载大师数据
            this.getProfessorInfo();

        },
        beforeDestroy: function() {
            console.log("beforeDestroy")
            this.textarea.removeEventListener('keyup', this.updateTextCount);
        }
    }
</script>
<style scoped>
    li {
        list-style-type: none;
    }
    
    .tutor-detail {
        padding: .9rem;
        padding-bottom: .625rem;
        background: #fff;
        position: relative;
    }
    
    .tutor-detail .follow {
        right: 1rem;
        color: #f85f48;
    }
    
    .tutor-detail .follow,
    .tutor-detail .followed {
        position: absolute;
        top: 0;
        font-size: .65rem;
        text-align: right;
        padding-top: 1.4rem;
        z-index: 1;
    }
    
    .tutor-detail .follow .btn-follow,
    .tutor-detail .followed .btn-follow {
        width: .7rem;
        height: .7rem;
        display: block;
        margin: 0 auto .25rem;
    }
    
    .tutor-detail .tutor {
        padding: .25rem 4.5rem 0 3.25rem;
        position: relative;
        height: 2.65rem;
        line-height: 1.5;
    }
    
    .tutor-detail .tutor .avatar {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .tutor-detail .title {
        margin-top: .8rem;
    }
    
    .tutor-detail .tutor .nickname {
        font-size: .85rem;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .tutor-detail .tutor .follow-count {
        font-size: .7rem;
        color: #999;
    }
    
    .tutor-detail .tutor .follow-count .count {
        color: #333;
    }
    
    .tutor-detail .introduction,
    .tutor-detail .title {
        color: #333;
        font-size: .7rem;
        line-height: 1.5;
    }
    
    .tutor-detail .tags {
        margin-top: .3rem;
    }
    
    .tutor-detail .tags .tag {
        display: inline-block;
        line-height: 1rem;
        font-size: .6rem;
        color: #999;
        padding: 0 .35rem;
        margin-right: .3rem;
        border-radius: .1rem;
        border: 1px solid #e5e5e5;
    }
    
    .tutor-detail .report {
        margin-top: -1rem!important;
    }
    
    .report {
        float: right;
        margin-top: -.5rem;
    }
    
    .questions .a-question {
        margin-bottom: .6rem;
        padding: .9rem .6rem .5rem;
        background: #fff;
    }
    
    .question-form {
        padding: .6rem .9rem .9rem;
        background: #fff;
    }
    
    .question-form .tips {
        box-sizing: border-box;
        font-size: .65rem;
        margin-bottom: .725rem;
        color: #999;
        position: relative;
        height: 1.2rem;
        line-height: 1.2rem;
        padding-top: .12rem;
    }
    
    .question-form .tips .ques-note {
        float: right;
        display: inline-block;
        padding-top: .05rem;
    }
    
    .question-form .text-wrap {
        padding: .65rem .65rem .57rem;
        background: #f4f4f4;
        border: 1px solid #d6d6d6;
        border-radius: .2rem;
        position: relative;
    }
    
    .question-form textarea {
        display: block;
        width: 100%;
        height: 3.5rem;
        background: #f4f4f4;
        border: none;
        font-size: .75rem;
        line-height: .9rem;
        outline: none;
        box-shadow: none;
        -webkit-appearance: none;
        resize: none;
    }
    
    .question-form .counter {
        position: absolute;
        bottom: .625rem;
        right: .625rem;
        font-size: .75rem;
        color: #999;
    }
    
    .question-form .btn-panel {
        padding-top: .475rem;
        text-align: center;
    }
    
    .question-form .btn-panel button {
        padding: .4rem .45rem;
        border-radius: .25rem;
        background-color: #f85f48;
        color: #fff;
        font-size: .85rem;
    }
    
    .questions .a-question .question-content {
        font-size: .8rem;
        line-height: 1.1rem;
        color: #3f3f3f;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .questions .a-question .question-answer .avatar {
        float: left;
    }
    
    .questions .a-question .question-answer {
        overflow: hidden;
        margin-top: .9rem;
    }
    
    .questions .a-question .question-footer {
        color: #ababab;
        font-size: .65rem;
        margin-left: .3rem;
        margin-top: .95rem;
    }
    
    .questions .a-question .question-footer .count {
        float: right;
        margin-left: .5rem;
        line-height: 1.1rem;
    }
    
    button {
        display: inline-block;
        outline: none;
        border: none;
        text-align: center;
        text-decoration: none;
    }
    
    .like-icon-gray {
        color: #999;
        background-image: url('/fengshui/static/pic/icon/like.png');
    }
    
    .like-icon {
        width: .8rem;
        height: .8rem;
        vertical-align: -5%;
    }
    
    .questions .a-question .question-footer .pic-icon,
    .questions .a-question .question-footer .time {
        line-height: 1.1rem;
        vertical-align: middle;
    }
    
    .player {
        margin-left: 1.05rem;
    }
    
    .like-icon {
        display: inline-block;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50%;
    }
    
    .header-bar {
        padding-left: .6rem;
        background: #f4f4f4;
        line-height: 2rem;
        color: #999;
        font-size: .65rem;
    }
    
    .questions {
        margin-bottom: 4rem;
    }
    
    .weui-dialog {
        border-radius: 8px;
        padding-bottom: 8px;
    }
    
    .dialog-title {
        line-height: 30px;
        color: #666;
    }
    
    .img-box {
        height: 350px;
        overflow: hidden;
    }
    
    .vux-close {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    
    .vux-close:after {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    .vux-close:before {
        content: '';
        position: absolute;
        left: 0;
        top: 11px;
        width: 24px;
        height: 1px;
        background-color: currentColor;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    .vux-close:after {
        content: '';
        position: absolute;
        left: 0;
        top: 11px;
        width: 24px;
        height: 1px;
        background-color: currentColor;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
</style>